<template>
  <div>
    <PageTools>
      <template #left>
        <i class="el-icon-info" />
        <span>共16条记录</span>
      </template>
      <template #right>
        <el-button type="danger" size="small">普通excel导出</el-button>
        <el-button type="info" size="small">复杂标头ecxel导出</el-button>
        <el-button type="success" size="small" @click="excelBtn">excel导入</el-button>
        <el-button type="primary" size="small" @click="AdddiaLog">新增员工</el-button>
      </template>
    </PageTools>
    <el-card style="margin-top: 10px;">
      <el-table border :data="list">
        <el-table-column label="序号" type="index" />
        <el-table-column label="姓名" prop="username" />
        <el-table-column label="头像" prop="staffPhoto" />
        <el-table-column label="手机号" prop="mobile" />
        <el-table-column label="工号" prop="workNumber" />
        <el-table-column label="聘用形式" prop="formOfEmployment">
          <template #default="scoped">
            <!-- 如果是一个对象 回去对象中的属性 属性是可变的 此时应该用 对象【属性的key】 -->
            <!-- 如果对象中取属性不需要改变可以通过 对象.属性    -->
            <!-- 下面使用的是一个 短路运算  ||  前面为 false（undefined）  直接取后面一个   -->
            {{ hireMap[+scoped.row.formOfEmployment] || '未知' }}

          </template>
        </el-table-column>
        <el-table-column label="部门" prop="departmentName" />
        <el-table-column label="入职时间" prop="timeOfEntry">
          <template #default="scoped">
            {{ formDate(scoped.row.timeOfEntry) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scoped">
            <el-button type="text" size="small">查看</el-button>
            <el-button type="text" size="small">转正</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>
            <el-button type="text" size="small">角色</el-button>
            <el-button type="text" size="small" @click="delFn(scoped.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" align="middle" style="height:60px;">
        <el-pagination
          :page-size="parames.size"
          layout="total,prev, pager, next"
          :current-page="parames.page"
          :total="total"
          hide-on-single-page
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <AddDiaLog
      :dialog-visible="dialogVisible"
      @close="close"
      @updata="fetchEmployeeList"
    />
  </div>
</template>

<script>
// import PageTools from '@/components/PageTools'
import { getEmployeeList, delEmployee } from '@/api'
import dayjs from 'dayjs'
import AddDiaLog from './components/AddDialog.vue'
export default {
  // components: { PageTools } //  全局注册了
  components: { AddDiaLog },
  data() {
    return {
      parames: {
        page: 1,
        size: 10
      },
      list: [],
      total: 0,
      hireMap: { //  员工应聘形式
        1: '正式',
        2: '非正式'
      },
      dialogVisible: false // 新增员工的 弹出状态
    }
  },
  created() {
    this.fetchEmployeeList()
  },

  methods: {
    // excel 导入
    excelBtn() {
      this.$router.push('/import')
    },

    // 删除员工
    delFn(val) {
      // 提示
      this.$confirm('确认删除员工吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delEmployee(val.id)
        // 提示用户
        this.$message.success('删除成功')
        // 做一个 边界优化 当前页最后一项时 翻页
        if (this.list.length === 1 && this.parames.page > 1) {
          this.parames.page--
        }
        // 更新数据
        this.fetchEmployeeList()
      })
    },
    // 新增员工
    AdddiaLog() {
      this.dialogVisible = true
    },
    // 关闭新增员工弹窗
    close() {
      this.dialogVisible = false
    },
    // 分页
    currentChange(val) {
      this.parames.page = val
      this.fetchEmployeeList()
    },
    // 处理时间格式
    formDate(value) {
      return dayjs(value).format('YYYY-MM-DD')
    },
    async fetchEmployeeList() {
      const { data: { rows, total }} = await getEmployeeList(this.parames)
      this.list = rows
      this.total = total
    }
  }
}
</script>

<style>

</style>
